<template>
    <div>
        <div ref="mydiv">ref版本</div>
        <button @click="handleClick">获取Ref引用节点</button>
        <hr>
        <input type="text" v-model="mytext">
        <button @click="handleAdd">添加</button>
        <ul>
            <li v-for="(data, index) in datalist" :key="data">
                {{ data }}
                <button @click="handleDel(index)">删除</button>
            </li>
        </ul>
        <div v-if="datalist.length === 0">暂无内容</div>
    </div>
</template>

<script>
import { reactive, ref } from 'vue';


export default {
    setup() {
        //变量区
        const mytext = ref("")
        const datalist = ref(["aaa", "bbb", "ccc"])

        const mydiv = ref(null) //测试Ref引用
        //方法区
        const handleClick = () => {
            console.log(mydiv.value);
        }

        const handleAdd = () => {
            datalist.value.push(mytext.value)
            mytext.value = ""
        }

        const handleDel = (index) => {
            datalist.value.splice(index, 1)
        }

        return {
            mydiv,
            mytext,
            datalist,
            handleAdd,
            handleDel,
            handleClick
        }
    },
}
</script>